<template>
  <div>
    <transition name="el-zoom-in-center">
      <div class="measure" v-show="ShowArrays[0]">
        <div class="box">
          <div
            :class="[
              'box-containter',
              'iconfont',
              'icon-line',
              lineActive ? 'activeContainer' : ''
            ]"
            @click="drawLine"
            alt="测量线段"
          ></div>
          <div
            :class="[
              'box-containter',
              'iconfont',
              'icon-mianji',
              polygonActive ? 'activeContainer' : ''
            ]"
            @click="drawPolygon"
            alt="测量面积"
          ></div>
          <div
            class="box-containter iconfont icon-shanchu1"
            @click="clear"
            alt="删除"
          ></div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import "../assets/styles/icon.css";
export default {
  data() {
    return {
      lineActive: false,
      polygonActive: false
    };
  },
  name: "measure",
  props: {
    showArrys: { type: Array }
  },
  computed: {
    ShowArrays() {
      return this.$props.showArrys;
    }
  },
  methods: {
    //画线按钮事件
    drawLine: function() {
      this.lineActive = !this.lineActive;
      let Draw = window["Draw"];
      let view = window["view"];
      let draw = new Draw({
        //在view里创建draw
        view: view
      });
      let action = draw.create("polyline"); //创建画线实例
      view.focus();
      let that = this;
      action.on(
        [
          "vertex-add", // when a vertex is added  鼠标单击
          "vertex-remove", // when a vertex is removed 移除
          // "cursor-update", // when the pointer moves 鼠标移动
          "draw-complete" // when the drawing is completed 鼠标双击
        ],
        function(evt) {
          that.createLine(evt.vertices);
          if (evt.type == "draw-complete") {
            //结束
            that.lineActive = false;
          }
        }
      );
    },
    //画面按钮事件
    drawPolygon: function() {
      this.polygonActive = !this.polygonActive;
      let Draw = window["Draw"];
      let view = window["view"];
      let draw = new Draw({
        //在view里创建draw
        view: view
      });
      let action = draw.create("polygon"); //创建画线实例
      view.focus();
      let that = this;
      action.on(
        [
          "vertex-add", // when a vertex is added  鼠标单击
          "vertex-remove", // when a vertex is removed 移除
          // "cursor-update", // when the pointer moves 鼠标移动
          "draw-complete" // when the drawing is completed 鼠标双击
        ],
        function(evt) {
          that.createPolygon(evt.vertices);
          if (evt.type == "draw-complete") {
            //结束
            that.polygonActive = false;
          }
        }
      );
    },

    //画线和测距
    createLine: function(vertices) {
      let view = window["view"];
      let lineLayer = window["lineLayer"];
      lineLayer.removeAll(); //清空上次绘制的线
      let Graphic = window["Graphic"];
      let Point = window["Point"];
      let Polyline = window["Polyline"];
      let GeometryEngine = window["GeometryEngine"];
      let Color = window["Color"];
      console.log(GeometryEngine);
      let symbol = {
        //点样式
        type: "simple-marker",
        color: [47, 79, 79],
        width: 0.5,
        size: 4,
        outline: {
          color: [0, 0, 0],
          width: 1
        }
      };
      //将起点添加到地图
      let startGraphics = new Graphic({
        geometry: new Point({
          type: "point",
          x: vertices[0][0], //当底图是投影坐标系时用x,地理坐标系用longitude
          y: vertices[0][1], //当底图是投影坐标系时用y,地理坐标系用latitude
          spatialReference: view.spatialReference //和底图相同的坐标系
        }),
        symbol: symbol
      });

      lineLayer.add(startGraphics);

      //处理undefined
      vertices = vertices.map(items => {
        let tmp = [];
        items.map(item => {
          if (item) {
            tmp.push(item);
          }
          return tmp;
        });
        return tmp;
      });
      //将线添加到地图
      let lineGraphics = new Graphic({
        geometry: {
          type: "polyline",
          paths: vertices,
          spatialReference: view.spatialReference
        },
        symbol: {
          //线样式
          type: "simple-line", // autocasts as new SimpleFillSymbol
          // style: "dash",
          color: [255, 116, 3],
          width: 2
        }
      });
      lineLayer.add(lineGraphics);

      //测距
      let linePath = []; //线段坐标集合
      let pointStart = []; //起点
      pointStart.push(vertices[0][0]);
      pointStart.push(vertices[0][1]);
      linePath.push(pointStart);

      for (let i = 1; i < vertices.length; i++) {
        //获得鼠标移动的坐标信息
        let point = {
          type: "point",
          x: vertices[i][0],
          y: vertices[i][1],
          spatialReference: view.spatialReference
        };
        //鼠标位置
        let mouseGraphics = new Graphic({
          geometry: point,
          symbol: symbol
        });
        let xy = []; //鼠标当前经纬度
        xy.push(vertices[i][0]);
        xy.push(vertices[i][1]);
        linePath.push(xy);
        let line = new Polyline({
          //起点到当前鼠标的线段
          paths: linePath,
          spatialReference: view.spatialReference
        });
        let length = GeometryEngine.geodesicLength(line, "meters").toFixed(2); //测距
        let lengthText = this.lengthFormat(length); //单位转换
        let textSymbol = {
          //距离标注
          type: "text",
          color: "white",
          haloColor: "black",
          haloSize: "2px",
          text: lengthText,
          xoffset: "50px",
          yoffset: "-5px",
          font: {
            size: 12,
            family: "sans-serif",
            weight: "bold"
          }
        };
        let textGraphics = new Graphic({
          //标注位置为鼠标位置
          geometry: point,
          symbol: textSymbol
        });
        //将标注和鼠标位置添加到地图
        lineLayer.addMany([textGraphics, mouseGraphics]);
      }
    },
    //画面和测量面积
    createPolygon: function(vertices) {
      vertices = vertices.map(items => {
        let tmp = [];
        items.map(item => {
          if (item) {
            tmp.push(item);
          }
          return tmp;
        });
        return tmp;
      });
      let view = window["view"];
      // window["lineLayer"].removeAll(); //清空上次绘制的线

      // let Point = window["Point"];
      let Polygon = window["Polygon"];
      let Graphic = window["Graphic"];
      let polygonLayer = window["polygonLayer"];
      let GeometryEngine = window["GeometryEngine"];

      polygonLayer.removeAll();
      let symbol = {
        //点样式
        type: "simple-marker",
        color: [47, 79, 79],
        width: 0.5,
        size: 4,
        outline: {
          color: [0, 0, 0],
          width: 1
        }
      };
      let fillSymbol = {
        //面样式
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [3, 255, 240, 0.1],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 116, 3],
          width: 2
        }
      };

      let polygon = new Polygon({
        rings: vertices,
        spatialReference: view.spatialReference
      });

      let polygonGraphics = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });
      polygonLayer.add(polygonGraphics);
      let area = GeometryEngine.geodesicArea(polygon, "square-meters");
      let areaText = this.areaFormat(area);
      let center = polygon.centroid;
      let pointCenter = {
        type: "point",
        longitude: center.longitude,
        latitude: center.latitude
      };
      let textSymbol = {
        //面积标注
        type: "text",
        color: "white",
        haloColor: "black",
        haloSize: "2px",
        text: areaText,
        //xoffset: '50px',
        //yoffset: '-5px',
        font: {
          size: 12,
          family: "sans-serif",
          weight: "bold"
        }
      };
      let textGraphics = new Graphic({
        //标注为面中心位置
        geometry: pointCenter,
        symbol: textSymbol
      });
      polygonLayer.add(textGraphics);

      for (let i = 0; i < vertices.length; i++) {
        let point = {
          type: "point",
          x: vertices[i][0],
          y: vertices[i][1],
          spatialReference: view.spatialReference
        };

        let pointGraphics = new Graphic({
          geometry: point,
          symbol: symbol
        });
        polygonLayer.add(pointGraphics);
      }
    },
    //长度转换
    lengthFormat: function(length) {
      if (length < 2000) {
        return length + "米";
      } else {
        length = (length / 1000).toFixed(2);
        return length + "千米";
      }
    },

    //面积转换
    areaFormat: function(area) {
      area = Math.abs(area);
      console.log(area);
      if (area < 2000) {
        area = area.toFixed(2);
        return area + "平方米";
      } else {
        area = (area / 10000).toFixed(2);
        return area + "平方千米";
      }
    },
    //清除所有
    clear: function() {
      let lineLayer = window["lineLayer"];
      lineLayer.removeAll(); //清空上次绘制的线
      let polygonLayer = window["polygonLayer"];
      polygonLayer.removeAll();
    }
  }
};
</script>

<style>
.measure {
  position: fixed;
  top: 43.5%;
  left: 7%;
  /* background: red; */
  width: 160px;
  height: 51px;
}
.box {
  display: flex;
}
.box-containter {
  text-align: center;
  line-height: 46px;
  width: 51px;
  height: 51px;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 18px;
  border: 2px solid rgba(102, 102, 102, 0.5);
  /* border-left: none; */
  font-weight: bold;
  box-sizing: border-box;
  margin-left: 2px;
}
.activeContainer {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(55, 113, 199, 0.5);
  color: rgb(55, 113, 199);
}
.box-containter:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(55, 113, 199, 0.5);
  color: rgb(55, 113, 199);
}
.box-containter:first-child {
  /* border-left: 1px solid rgba(102, 102, 102, 0.5); */
}
</style>
